<template>
    <div class="traffic-violation-container">
        <!-- 左侧菜单 -->
        <div class="left-menu">
            <div
                class="menu-item"
                :class="{ active: activeTab === 'traffic-violation-video' }"
                @click="switchTab('traffic-violation-video')"
            >
                <i class="fas fa-video"></i> <!-- 视频图标 -->
                <span>交通违规视频</span>
            </div>
        </div>

        <!-- 右侧内容 -->
        <div class="right-content" v-if="activeTab === 'traffic-violation-video'">
            <!-- 查询功能 -->
            <div class="search-bar">
                <div class="search-input-container">
                    <i class="fas fa-search search-icon"></i> <!-- 放大镜图标 -->
                    <input
                        v-model="searchQuery"
                        type="text"
                        placeholder="请输入设备编码"
                    />
                </div>
                <button @click="handleSearch">
                    <span>搜索</span>
                </button>
            </div>

            <!-- 数据表格 -->
            <div class="data-table" v-if="activeTab === 'traffic-violation-video'">
                <table>
                    <thead>
                        <tr>
                            <th v-for="column in columns" :key="column">{{ column }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in paginatedData" :key="item.id">
                            <td>{{ item.category }}</td>
                            <td>{{ item.source }}</td>
                            <td>{{ item.timeCategory }}</td>
                            <td>{{ item.storagePath }}</td>
                            <td>{{ item.deviceCode }}</td>
                            <td>{{ item.startTime }}</td>
                            <td>{{ item.endTime }}</td>
                            <td>
                                <i class="fas fa-eye view-icon" @click="viewVideo(item)"></i> <!-- 查看图标 -->
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- 分页组件 -->
            <div class="pagination" v-if="activeTab === 'traffic-violation-video'">
                <button
                    :disabled="currentPage === 1"
                    @click="currentPage--"
                >
                    上一页
                </button>
                <span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
                <button
                    :disabled="currentPage === totalPages"
                    @click="currentPage++"
                >
                    下一页
                </button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";

// 当前激活的菜单项
const activeTab = ref("traffic-violation-video");

// 表格列名
const columns = ref([
    "信息分类",
    "视频来源",
    "时间分类",
    "存储路径",
    "设备编码",
    "视频开始时间",
    "视频结束时间",
    "查看",
]);

// 模拟数据（实际应从数据库获取）
const data = ref([
    {
        id: 1,
        category: "交通路口",
        source: "摄像头001",
        timeCategory: "白天",
        storagePath: "/videos/001.mp4",
        deviceCode: "CAM-001",
        startTime: "2023-10-01 08:30:00",
        endTime: "2023-10-01 08:35:00",
        videoUrl: "https://example.com/video1.mp4", // 视频地址
    },
    {
        id: 2,
        category: "高速公路",
        source: "摄像头002",
        timeCategory: "夜间",
        storagePath: "/videos/002.mp4",
        deviceCode: "CAM-002",
        startTime: "2023-10-01 20:15:00",
        endTime: "2023-10-01 20:20:00",
        videoUrl: "https://example.com/video2.mp4", // 视频地址
    },
    // 更多数据...
]);

// 查询功能
const searchQuery = ref("");
const filteredData = ref(data.value);

// 分页功能
const currentPage = ref(1);
const pageSize = ref(10); // 每页显示的数据条数

// 计算分页后的数据
const paginatedData = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return filteredData.value.slice(start, end);
});

// 计算总页数
const totalPages = computed(() => {
    return Math.ceil(filteredData.value.length / pageSize.value);
});

// 处理搜索
const handleSearch = () => {
    if (searchQuery.value) {
        filteredData.value = data.value.filter((item) =>
            item.deviceCode.includes(searchQuery.value)
        );
    } else {
        filteredData.value = data.value;
    }
    currentPage.value = 1; // 搜索后重置到第一页
};

// 查看视频
const viewVideo = (item) => {
    window.open(item.videoUrl, "_blank"); // 在新标签页打开视频
};

const switchTab = (tab) => {
    activeTab.value = tab;
};
// 初始化数据
onMounted(() => {
    // 模拟从数据库获取数据
    // 实际应使用API调用
    console.log("数据加载完成");
});
</script>

<style scoped>
.traffic-violation-container {
    display: flex;
    height: 100%;
}

/* 左侧菜单 */
.left-menu {
    width: 200px;
    background-color: #f5f5f5; /* 淡灰色背景 */
    padding: 20px;
    border-right: 1px solid #ddd; /* 右侧分割线 */
}

.menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #333;
    padding: 15px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-radius: 8px;
    margin-bottom: 10px;
    text-align: center;
}

.menu-item:hover {
    background-color: #e0e0e0; /* 悬停背景色 */
}

.menu-item.active {
    background-color: #3498db; /* 激活背景色 */
    color: white;
}

.menu-item i {
    font-size: 24px; /* 图标大小 */
}

.menu-item span {
    font-size: 14px; /* 文字大小 */
}

/* 右侧内容 */
.right-content {
    flex-grow: 1;
    padding: 20px;
}

/* 查询功能 */
.search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    width: 400px; /* 缩短搜索栏宽度 */
}

.search-input-container {
    display: flex;
    align-items: center;
    flex-grow: 1;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 8px;
    background-color: #fff;
}

.search-icon {
    font-size: 16px;
    color: #95a5a6;
    margin-right: 8px;
}

.search-input-container input {
    border: none;
    outline: none;
    flex-grow: 1;
    font-size: 14px;
}

.search-bar button {
    padding: 8px 16px;
    background-color: #3498db; /* 蓝色按钮 */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.search-bar button:hover {
    background-color: #2980b9; /* 按钮悬停效果 */
}

/* 数据表格 */
.data-table {
    width: 100%;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 12px;
    text-align: left;
    border-right: 1px solid #ddd; /* 列竖线分割 */
    border-bottom: 1px solid #ddd; /* 行横线分割 */
}

th:last-child,
td:last-child {
    border-right: none; /* 最后一列不加竖线 */
}

th {
    background-color: #3498db; /* 表头背景色 */
    color: white;
}

tr:hover {
    background-color: #f5f5f5; /* 行悬停效果 */
}

/* 查看图标 */
.view-icon {
    font-size: 18px;
    color: #3498db;
    cursor: pointer;
}

.view-icon:hover {
    color: #2980b9; /* 悬停效果 */
}

/* 分页组件 */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.pagination button {
    padding: 8px 16px;
    background-color: #3498db; /* 蓝色按钮 */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.pagination button:disabled {
    background-color: #95a5a6; /* 禁用状态 */
    cursor: not-allowed;
}

.pagination button:hover:not(:disabled) {
    background-color: #2980b9; /* 按钮悬停效果 */
}

.pagination span {
    font-size: 14px;
    color: #333;
}
</style>